<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<view class="aicon">
					<u-icon name="search" color="#999" size="20"></u-icon>
				</view>
				<input type="text" v-model="keywords" placeholder="搜索您想要的商品" placeholder-style="color:#999;" confirm-type="search" @confirm="searchHotKeywords(keywords)" />
				<!-- <aicon class="close" v-if="keywords" @click="closeSearchTap()" type="roundclosefill" size="26" :color="template.color.temp_color"></aicon> -->
				<view class="close">
						<u-icon v-if="keywords" @click="closeSearchTap()" name="close-circle-fill" color="#e65600" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="hishory" v-if="hishoryList.length>0 ">
			<view v-if="hishoryList.length>0" class="label" style="margin-bottom: 10rpx;">
				<view class="title">最近搜索</view> 
				<view class="list">
					<view class="text" v-for="(item, index) in hishoryList" :key="index" @click="searchHotKeywords(item)">{{item}}</view>
				</view>
			</view>
			
		</view>
	
		
		<view class="guess-section">
			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" >
				<view class="image-wrapper" @click="navToDetailPage(item)"><image :src="item.previewUrl" mode="aspectFill"></image></view>
				<view class="" style="padding: 0 20rpx;">
					<text class="title clamp">{{ item.goodsName }}</text>
					<view class="" style="display: flex;align-items: center;justify-content: space-between;">
						<text class="price">￥{{ item.goodsPrice }}</text>
						<uv-icon name="shopping-cart" color="red" size="28" @click.stop="addToCart(item)"></uv-icon>
					</view>
				</view>
				
			</view>
		</view>
		<!-- <view class="none_list_box" v-if="goodsList.length===0">
			<image src="../../static/images/none_data_icon_01.png" mode="widthFix"></image>
			<span>商品正在上新中</span>
		</view> -->
	</view>
</template>
<script>
	
	import { goodSearch,insertPlugsShopCart,searchPlugsGoodsSpecificationByGoodsId } from '../../../utils/api.js';
	export default {
		data() {
			return {
				keywords: '',
				goodsList: [],
				hishoryList: [],
				nowBusinessInfo:{}
				
			}
		},
		onLoad(e) {
			let self = this;
			let hishory = uni.getStorageSync('__ddminiHishoryList');
			
			if(hishory){
				self.hishoryList = hishory;
			}
			this.getGoodsList()
		},
		onShow() {
			this.nowBusinessInfo = uni.getStorageSync('nowBusinessInfo');
		},
		
		methods: {
			closeSearchTap() {
				this.keywords = '';
				this.getGoodsList();
			},
			Topath(route) {
				uni.navigateTo({
					url: route
				})
			},
			delHishoryTap() {
				this.hishoryList = [];
				uni.removeStorageSync('__ddminiHishoryList');
			},
			searchHotKeywords(key) {
				let self = this;
				let data = self.hishoryList;
				let number = 0;
				if(key==''){
					uni.showToast({
						title: '输入内容不能为空',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				data.forEach(res => {
					if(res == key){
						number = 1;
					}
				})
				if(number===0){
					self.hishoryList.push(key);
					uni.setStorage({key: '__ddminiHishoryList',data: self.hishoryList});
				}
				self.keywords = key;
				self.getGoodsList();
			},
			getGoodsList() {
				let postData = {
					page: 1,
					size: 10,
					UserServiceToken:this.userToken,
					keyword:this.keywords
				};
				
				goodSearch(postData).then(res => {
					if(res.code === 200){
						this.goodsList = res.body.list;
					}
				})
			},
			
			getPathTap(path){
				app.globalData.getPathTap(path);
			},
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: `/pages/porduct/porduct?id=${id}`
				});
			},
			addToCart(item) {
				let token = uni.getStorageSync('userInfo').accessToken;
			
				if (token == null) {
					uni.showModal({
						title: '提示',
						content: '登录才能添加宝贝哦~',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/user/login'
								});
							} else if (res.cancel) {
							}
						}
					});
				} else {
					searchPlugsGoodsSpecificationByGoodsId( {
						goodsId: item.id
					}).then(res => {
						if (res.code == 200) {
							if (res.body.plugsGoodsSpecificationList.length == 0) {
								let postData = {
									businessId: item.businessId.toString(),
									goodsId: item.id,
									goodsCategoryId: item.categoryId,
									goodsNum: 1,
									goodsSpecificationIds: '0'
								};
								insertPlugsShopCart(postData).then(res => {
									// console.log("insertPlugsShopCart", res)
									if (res.code == 200) {
										uni.showToast({
											title: '加入成功',
											icon: 'none'
										});
										// this.getCartList();
									}
								});
							} else {
								let postData = {
									businessId: item.businessId.toString(),
									goodsId: item.id,
									goodsCategoryId: item.categoryId,
									goodsNum: 1,
									goodsSpecificationIds: res.body.plugsGoodsSpecificationList[0].id
								};
								insertPlugsShopCart(postData).then(res => {
									// console.log("insertPlugsShopCart", res)
									if (res.code == 200) {
										uni.showToast({
											title: '加入成功',
											icon: 'none'
										});
										// this.getCartList();
									}
								});
							}
						}
					});
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #fff;
	}
	
	.header{
		position: sticky;
		top: 0;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		z-index: 100;
		border-bottom: 1px solid #f5f5f5;
		.search{
			display: flex;
			align-items: center;
			width: 90%;
			margin: 0 auto;
			background-color: #f2f2f2;
			height: 70rpx;
			border-radius: 100rpx;
			position: relative;
			.aicon{
				margin-left: 20rpx;
			}
			input{
				width: 80%;
				height: 100%;
				padding-left: 16rpx;
				color: #333;
				font-size: 28rpx;
			}
			.close{
				position: absolute;
				right: 20rpx;
			}
		}
	}
	.hishory{
		width: 90%;
		margin: 0 auto;
		padding: 40rpx 0;
		.label{
			position: relative;
			.shanchu{
				position: absolute;
				right: 0;
			}
			.title{
				color: #999;
				font-size: 24rpx;
			}
			.list{
				display: flex;
				flex-wrap: wrap;
				.text{
					background-color: #e2e2e2;
					color: #666;
					padding: 6rpx 24rpx;
					font-size: 24rpx;
					border-radius: 100rpx;
					margin: 20rpx 0;
					margin-right: 20rpx;
				}
			}
		}
	}
	.guess-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 10rpx;
		background: #fff;
		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 20rpx;
			border: 1rpx solid #f5f5f5;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			&:nth-child(2n + 1) {
				
			}
		}
		.image-wrapper {
			width: 100%;
			height: 330rpx;
			border-radius: 3px;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title {
			font-size:32rpx;
			color: #303133;
			line-height: 80rpx;
		}
		.price {
			font-size: 32rpx;
			color:#fa436a;
			line-height: 1;
		}
	}
</style>
